<template>
  <div class="wapper">
    <div class="header-abs">
      <router-link tag="div" to="/">
        <!-- 返回的icon-->
        <div class="iconfont backicon">&#xe606;</div>
      </router-link>
    </div>
    <div class="title-warpper" v-show="hedaerShow" :style="options">
      <div class="title">
        {{sightName}}
        <router-link to="/">
          <div class="left">
            <!-- 返回的icon-->
            <div class="iconfont backicon">&#xe606;</div>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HeaderAbs',
  data () {
    return {
      hedaerShow: false,
      options: {
        opacity: 0
      }
    }
  },
  props: ['sightName'],
  methods: {
    handelScroll () {
      const top = document.documentElement.scrollTop
      if (top > 60) {
        let opacity = top / 140
        opacity = opacity > 1 ? 1 : opacity
        this.options = {opacity: opacity}
        this.hedaerShow = true
      } else {
        this.hedaerShow = false
      }
    }
  },
  mounted () {
    /* 不过此处调用了全局事件，不过不做解绑，则在其他页面也会有影响，在其他页面也会调用handelScroll这个方法 */
    window.addEventListener('scroll', this.handelScroll)
  },
  beforeDestroy () {
    /* 我们在这里对全局事件解绑，这样就不会影响其他组件  */
    window.removeEventListener('scroll', this.handelScroll)
  }/* ,
  activated () {
    keep-alive标签会执行的方法，指在加载页面时调用该方法
    不过此处调用了全局事件，不过不做解绑，则在其他页面也会有影响，在其他页面也会调用handelScroll这个方法
    window.addEventListener('scroll', this.handelScroll)
  },
  deactivated () {
    keep-alive标签会执行的方法，在页面被替换或者加载新页面会执行
    我们在这里对全局事件解绑，这样就不会影响其他组件
    window.removeEventListener('scroll', this.handelScroll)
  } */
}
</script>

<style lang="stylus" scoped>
  @import '~styles/config.styl'
  .header-abs
    position: absolute
    width: .8rem
    height: .8rem
    line-height: .8rem
    text-align: center
    top: .2rem
    left: .2rem
    border-radius: .4rem
    background: rgb(0,0,0,.8)
    .backicon
      text-align: center
      font-size: .4rem
      color: #fff
  .title-warpper
    z-index: 2
    background: $background
    line-height: $lingheight
    color: #FFFFFF
    font-size: .32rem
    overflow: hidden
    position: fixed
    top: 0
    left: 0
    right: 0
    .title
      text-align: center
      .left
        position: absolute
        width: .64rem
        top: 0
        left: 0
        color: #fff
        .backicon
          text-align: center
          font-size: .4rem
</style>
